<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>
<script id="ColorVertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    void main(){
        gl_Position = a_Position;
        gl_PointSize = 30.0;
    }
</script>
<script id="ColorFragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec2 u_CanvasPosi;
    void main(){
        gl_FragColor = vec4(gl_FragCoord.x / u_CanvasPosi.x,gl_FragCoord.y / u_CanvasPosi.y,1,1);
        //gl_FragColor = vec4(1,0,0,1);
    }
</script>
<script id="vs2" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    attribute vec2 a_Pin;
    varying vec2 v_Pin;
    void main(){
        gl_Position = a_Position;
        gl_PointSize = 30.0;
        v_Pin=a_Pin;
    }
  </script>
<script id="fs2" type="x-shader/x-fragment">
    precision mediump float;
    uniform sampler2D u_Sampler;
    varying vec2 v_Pin;
    void main(){
        gl_FragColor=texture2D(u_Sampler,v_Pin);
        //gl_FragColor = vec4(1,0,0,1);
    }
</script>
<script type="module">
    import { Matrix4, Vector3, Color, OrthographicCamera, PerspectiveCamera, Spherical } from '../js/three.module.js';
    import { CreateProgram, imgPromise } from '../js/Utils.js';
    import lib from '../js/ThreeLib.js';
    import CameraController from '../js/CameraController.js'
    import Poly from '../js/Poly4.js'

    import Geo from '../js/Poly2/Geo.js'
    import Mat from '../js/Poly2/Mat.js'
    import Obj3D from '../js/Poly2/Obj3D.js'
    import Scene from '../js/Poly2/Scene.js'



    //#region gl
    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - 4;

    const gl = canvas.getContext("webgl", { antialias: true, });

    // gl.enable(gl.DEPTH_TEST);//开始背景遮挡会频闪
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);//去图片描边
    //#endregion

    let program = CreateProgram(gl,
        document.querySelector('#ColorVertexShader').innerText,
        document.querySelector('#ColorFragmentShader').innerText);
    let program2 = CreateProgram(gl,
        document.querySelector('#vs2').innerText,
        document.querySelector('#fs2').innerText);


    //创建一张图像
    gl.useProgram(program);
    const nodeBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, nodeBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
        -1, 1, -1, -1, 1, -1, 1, 1
    ]), gl.STATIC_DRAW);
    const a_Position = gl.getAttribLocation(program, 'a_Position');
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(a_Position);

    const elementBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array([
        0, 1, 2, 0, 2, 3
    ]), gl.STATIC_DRAW);

    let u_CanvasPosi = gl.getUniformLocation(program, 'u_CanvasPosi');
    gl.uniform2fv(u_CanvasPosi, [canvas.width, canvas.height]);



    //创建纹理对象
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
    gl.activeTexture(gl.TEXTURE0);
    let texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(
        gl.TEXTURE_2D,
        gl.TEXTURE_MIN_FILTER,
        gl.LINEAR
    );
    gl.texParameteri(
        gl.TEXTURE_2D,//二维纹理
        gl.TEXTURE_WRAP_T,//纹理容器在t方向的尺寸
        gl.CLAMP_TO_EDGE//边缘加紧的意思
    );
    gl.texParameteri(
        gl.TEXTURE_2D,//二维纹理
        gl.TEXTURE_WRAP_S,//纹理容器在s方向的尺寸
        gl.CLAMP_TO_EDGE//边缘加紧的意思
    );
    gl.texImage2D(
        gl.TEXTURE_2D,
        0,
        gl.RGBA,
        canvas.width,
        canvas.height,
        0,
        gl.RGBA,
        gl.UNSIGNED_BYTE,
        null
    );


    //创建 帧缓冲区(把本次渲染的图像添加到创建的纹理图像中)
    const framebuffer = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
    gl.framebufferTexture2D(
        gl.FRAMEBUFFER,
        gl.COLOR_ATTACHMENT0,
        gl.TEXTURE_2D,
        texture, 0
    );


    //设置渲染尺寸
    gl.viewport(0, 0, canvas.width, canvas.height);

    //绘图
    lib.clearCanvas(gl, [0, 0, 0, 1]);
    gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_BYTE, 0);



    {

        //清空帧缓冲区
        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
        //恢复渲染尺寸
        gl.viewport(0, 0, canvas.width, canvas.height);

        let program2 = CreateProgram(gl,
            document.querySelector('#vs2').innerText,
            document.querySelector('#fs2').innerText);

        let scene = new Scene({ gl: gl });
        scene.regProgram('test02', {
            program: program2,
            attribs: ['a_Position', 'a_Pin'],
            uniforms: ['u_Sampler'],
        });

        let obj = new Obj3D({
            geo: new Geo({
                data: {
                    'a_Position': { size: 2, array: new Float32Array([-0.5, 0.5, -0.5, -0.5, 0.5, -0.5, 0.5, 0.5]) },
                    'a_Pin': { size: 2, array: new Float32Array([0, 1, 0, 0, 1, 0, 1, 1]) },
                },
                element: { array: new Uint8Array([0, 1, 2, 0, 2, 3]) },
            }),
            mat: new Mat({
                program: 'test02',
                mode: ['TRIANGLES'],
            })
        });

        gl.bindTexture(gl.TEXTURE_2D, texture);
        let location = scene.getLocation('test02', 'u_Sampler');
        gl.uniform1i(location, 0)
        scene.add(obj);

        scene.draw();
    }



</script>

</html>